<template>
  <div class="worklog-container">
    <h2>个人工作日志</h2>
    <el-table :data="workLogs" style="width: 100%" border>
      <el-table-column prop="logId" label="日志ID" width="120" />
      <el-table-column prop="roomId" label="房间号" width="120" />
      <el-table-column prop="oldStatus" label="原状态">
          <template #default="scope">
            {{ getStatusText(scope.row.oldStatus) }}
          </template>
        </el-table-column>
      <el-table-column prop="newStatus" label="新状态">
          <template #default="scope">
            {{ getStatusText(scope.row.newStatus) }}
          </template>
        </el-table-column>
      <el-table-column prop="changedTime" label="变更时间" width="180" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const workLogs = ref([])

const getStatusText = (status) => {
  const statusMap = {
    0: '空闲',
    1: '锁定',
    2: '预定',
    3: '使用',
    4: '维护'
  }
  return statusMap[status] || status
}

const fetchWorkLogs = async () => {
  try {
    const response = await axios.get('/api/staff/worklog')
    workLogs.value = response.data.data.sort((a, b) => {
      return new Date(b.changedTime) - new Date(a.changedTime)
    })
  } catch (error) {
    console.error('获取工作日志失败:', error)
    ElMessage.error('获取日志失败')
  }
}

onMounted(() => {
  fetchWorkLogs()
})
</script>
<style scoped>
.worklog-container {
  padding: 20px;
}

.el-table {
  margin-top: 20px;
}
</style>